<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background: #0A0F23;
    }

    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>

<body>
  <div id="main" style="width: 100%;height: 100%;"></div>
</body>
<script>
  var myChart = echarts.init(document.getElementById('main'));
  option = {
    backgroundColor: "#0A0F23",
      color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b','#f86e89', '#ef7218', '#f5d650'],
    title: {
      text: "2017年全省省辖市（区）专利申请情况",
      top: "15%",
      left: "center",
      textStyle: {
        color: "#FFF",
        fontSize: 22
      }
    },
    legend: [{
      data: ['发明', '实用新型', '外观设计'],
      right: '5%',
      orient: 'vertical',
      bottom: '5%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    }],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '25%',
      left: '5%',
      bottom: '3%',
      right: '13%',
      containLabel: true
    },
    yAxis: [{
      type: 'category',
      inverse: true,
      data: ['西安', '宝鸡', '咸阳', '榆林', '汉中', '商洛', '杨凌', '渭南', '延安', '安康', '铜川', '韩城'],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#0A0F23'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    }],
    xAxis: [{
      type: 'value',
      position: 'top',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      },
      axisLine: {
        lineStyle: {
          show: false,
          color: '#fff'
        }
      }
    }],
    series: [{
        name: '发明',
        type: 'bar',
        stack: '专利',
        barWidth: '30%',
        data: [40439, 1267, 980, 763, 811, 630, 760, 480, 179, 172, 39, 87]
      }, {
        name: '实用新型',
        type: 'bar',
        stack: '专利',
        barWidth: '30%',
        data: [22461, 1864, 1862, 1538, 983, 690, 573, 585, 524, 342, 103, 70]
      }, {
        name: '外观设计',
        type: 'bar',
        stack: '专利',
        barWidth: '30%',
        data: [18210, 347, 324, 238, 324, 263, 48, 100, 391, 273, 159, 56]
      }
    ]
  };

  myChart.setOption(option);

</script>

</html>
